<template>
  <section class="component user-select">
    <data-box :data="dataSet" :page="pageService" @onPageChange="getUsers" :selectionRow.sync="selectionRow">
      <template slot="columns">
        <el-table-column prop="realName" label="姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="userLevel" label="催收员等级" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dictConvert(row.userLevel,'UserLevel')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="deptName" label="机构" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="userStatus" label="状态" :formatter="(row) => $filter.dictConvert(row.userStatus,'CommonState')" :min-width="$helper.getColumnWidth(2)">
        </el-table-column>
        <el-table-column prop="caseSwitch" label="分案开关" :formatter="(row) => $filter.dictConvert(row.caseSwitch,'SwitchState ')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone" label="电话" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="userEmail" label="邮箱" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operatorRealName" label="创建人" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :min-width="$helper.getColumnWidth(6)" :formatter="(row) => $filter.dateTimeFormat(row.createTime)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="confirm">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Emit, Watch } from "vue-property-decorator";
import DataBox from "~/components/common/data-box.vue";
import { UserService } from "~/services/management-service/user.service";
import { PageService } from "~/utils/page.service";


@Component({
  components: {
    DataBox
  }
})
export default class UserSelect extends Vue {
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(PageService) private pageService: PageService;
  @Prop({ required: true })
  private departmentId

  private dataSet: any[] = []
  private selectionRow:any = {}

  @Emit("success")
  private emitSuccess(val){}

  @Watch("departmentId", { immediate: true })
  private onDepartmentIdChange(val) {
    if (val) this.getUsers()
  }

  private getUsers() {
    this.userService.getAllUsers({ deptId: this.departmentId, caseSwitch: 'ENABLED'}, this.pageService).subscribe(
      data => this.dataSet = data
    )
  }

  private confirm(){
    if(!this.selectionRow.id){
      this.$message("请选择用户")
      return
    }
    this.emitSuccess({
      id: this.selectionRow.id,
      realName: this.selectionRow.realName
    })
  }

}
</script>

<style lang="less" scoped>
</style>
